<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>12月1早上练习</title>
	<script type="text/javascript" src="./小米轮播/jquery-1.7.2.js"></script>
	<script type="text/javascript">
	$(function(){
		// 万能键
		$(".btn1").click(function(){
			
			$(".box1").css({
				width: '500px',
				background: 'red'
			});

			$(".box3").animate({"left":'800px'},1000);

			$(".box2").hide();
		})

		// 一键还原
		$(".btn2").click(function(){
			$(".box1").css({
				width: '150px',
				background: 'yellow'
			});

			$(".box2").show();

			$(".box3").animate({"left":'0px'},1000);
		})


		// 菜单栏
		$(".caidan").hover(function(){
			$(this).css("background","red").children('.caidan_son').stop().show();
		},function(){
			$(this).css("background","pink").children('.caidan_son').stop().hide();
		})
		


		// 风琴
		$(".list").click(function(){
			$(this).animate({'width':'460px'},200).siblings().animate({'width':'60px'}, 200);
		})



	})
	</script>

	<style type="text/css">
		.box1{
			width: 150px;
			height: 150px;
			background: yellow;
			margin-top: 30px;
			font-size: 40px;
		}


		.box2{
			width: 150px;
			height: 150px;
			background: blue;
			margin-top: 30px;
			font-size: 40px;
		}

		.box3{
			width: 150px;
			height: 150px;
			background: green;
			margin-top: 30px;
			font-size: 40px;
			position: relative;
			top: 0px;
			left: 0px;

		}

		/*菜单部分*/
		.yeye{
			position: relative;
		}
		.caidan{
			width: 150px;
			height: 40px;
			background: pink;
			margin-bottom: 20px;
			font-size: 26px;
			line-height: 40px;
			text-align: center;
		}
		
		.caidan_son{
			width: 300px;
			height: 220px;
			background: #000;
			position: absolute;
			left: 160px;
			top: 0px;
			display: none;
		}


		/*风琴部分*/
		.list1{
			width: 60px;
			height: 200px;
			background: #672254;
			float: left;
			list-style: none;
			color: #fff;
			font-size: 35px;
			cursor: pointer;
		}
		
		.list2{
			width: 60px;
			height: 200px;
			background: #5B2222;
			float: left;
			list-style: none;
			color: #fff;
			font-size: 35px;
			cursor: pointer;
		}

		.list3{
			width: 60px;
			height: 200px;
			background: #9A9D8E;
			float: left;
			list-style: none;
			color: #fff;
			font-size: 35px;
			cursor: pointer;
		}

		.list4{
			width: 60px;
			height: 200px;
			background: #39798B;
			float: left;
			list-style: none;
			color: #fff;
			font-size: 35px;
			cursor: pointer;
		}

		.list5{
			width: 60px;
			height: 200px;
			background:#2A2A2D;
			float: left;
			list-style: none;
			color: #fff;
			font-size: 35px;
			cursor: pointer;
		}

		.list6{
			width: 60px;
			height: 200px;
			background: #634471;
			float: left;
			list-style: none;
			color: #fff;
			font-size: 35px;
			cursor: pointer;
		}
	</style>

</head>
<body>
	<input type="button" value="万能键" class="btn1">
	<input type="button" value="一键还原" class="btn2">
	<div class="box1">1</div>
	<div class="box2">2</div>
	<div class="box3">3</div>
	<br>
	<br>
	<br>
	<br>
	<br>
	<div class="yeye">
	<div class="caidan">菜单1<div class="caidan_son">1</div></div>
	<div class="caidan">菜单2<div class="caidan_son">2</div></div>
	<div class="caidan">菜单3<div class="caidan_son">3</div></div>
	<div class="caidan">菜单4<div class="caidan_son">4</div></div>
	</div>
	<br>
	<br>
	<br>
	<br>
	<br>
	<!-- 风琴 -->
	<div>
		<li class="list list1">1</li>
		<li class="list list2">2</li>
		<li class="list list3">3</li>
		<li class="list list4">4</li>
		<li class="list list5">5</li>
		<li class="list list6">6</li>
	</div>

</body>
</html>